<template>
	<view>
		<view class="setpassword">
			<view class="text">旧密码:</view>
			<input type="text" placeholder="当前密码" v-model="old_pwd">
		</view>
		<Lines/>
		<view class="setpassword">
			<view class="text">新密码:</view>
			<input type="text" placeholder="新密码6~16个字符" v-model="new_pwd">
		</view>
		<Lines/>
		<view class="setpassword">
			<view class="text">确认密码:</view>
			<input type="text" placeholder="确认密码" v-model="def_pwd">
		</view>
		<Lines></Lines>
		<view class="add-goods">
			<view class="add-goods-item" @tap="submit()">确定</view>
		</view>
	</view>
</template>

<script>
	import Lines from '@/components/common/Lines.vue'
	import $http from '../../common/api/request.js'
	import {mapMutations,mapState,mapActions} from "vuex"
	export default {
		data() {
			return {
				// 旧密码
				old_pwd:'',
				//新密码
				new_pwd:'',
				// 确认密码
				def_pwd:''
			}
		},
		components:{
			Lines
		},
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		// 原生导航栏点击事件
		onNavigationBarButtonTap() {
			if(this.old_pwd == '' || this.new_pwd == '' || this.def_pwd == ''){
				uni.showToast({
					title:'密码不能为空',
					icon:'none'
				})
			}else if(this.new_pwd != this.def_pwd){
				uni.showToast({
					title:'新密码与确认密码不一致',
					icon:'none'
				})
			}else {
				this.submit()
			}
		},
		methods: {
			...mapMutations(['loginOut']),
			submit(){
				const _this = this
				$http.request({
					url:'/updatePwd',
					method:'POST',
					header:{
						token:true
					},
					data:{
						old_pwd:this.old_pwd,
						//新密码
						new_pwd:this.new_pwd,
						// 确认密码
						def_pwd:this.def_pwd
					}
				}).then((res)=>{
					if(res.protocol41){
						uni.navigateTo({
							url:'@page/login/login'
						})
						_this.loginOut()
					}
				})
			}
		}
	}
</script>

<style scoped>
.setpassword{
	padding: 10rpx;
	display: flex;
}
.text{
	text-align-last: justify;
	text-align: justify;
	width: 180rpx;
}
.add-goods{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		background-color: #49bdfb;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
</style>
